<template>
  <div class="workTrack">
    <div class="workTrackTop">
      <!-- 搜索表单 -->
      <div class="topForm">
        <el-form ref="searchForm" :model="searchForm"  :inline="true" size="mini">
          <el-form-item label="订单号：" prop="orderNum">
            <el-input v-model="searchForm.orderNum" clearable></el-input>
          </el-form-item>
          <el-form-item label="运单号：" prop="wayBill">
            <el-input v-model="searchForm.wayBill" clearable></el-input>
          </el-form-item>
          <el-form-item label="运单状态：" prop="wayBillStatus">
            <el-select v-model="searchForm.wayBillStatus" filterable clearable>
              <el-option
                v-for="(item, index) in statuList"
                :key="index"
                :label="item.rvCmeaning"
                :value="item.rvLowValue">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="车牌号：" prop="carNum">
            <el-input v-model="searchForm.carNum" clearable></el-input>
          </el-form-item>
          <el-form-item label="司机：" prop="driver">
            <el-input v-model="searchForm.driver" clearable></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" size="mini" @click="searchList">查询</el-button>
          </el-form-item>
        </el-form>
      </div>
      <!-- 上方表格 -->
      <div class="topTable">
        <div class="topTableTitle">运单列表</div>
        <!-- 按钮组 -->
        <div class="topTableBtn">
          <el-button type="primary" size="mini" plain @click="editWillBill('ZHD')">{{ funcmap['ZHD'] }}</el-button>
          <el-button type="primary" size="mini" plain @click="editWillBill('ZH')">{{ funcmap['ZH'] }}</el-button>
          <el-button type="primary" size="mini" plain @click="editWillBill('XHD')">{{ funcmap['XHD'] }}</el-button>
          <el-button type="primary" size="mini" plain @click="editWillBill('XH')">{{ funcmap['XH'] }}</el-button>
          <el-button type="primary" size="mini" plain @click="editWillBill('WC')">{{ funcmap['WC'] }}</el-button>
        </div>
        <!-- 表格 -->
        <div class="topTableBox">
          <el-table :data="topTableData" border :height="topTableHeight" :header-cell-style="{ textAlign: 'center' }" highlight-current-row @row-click="getTopCurrent">
            <el-table-column type="index" align="center" label=" " width="50"></el-table-column>
            <el-table-column prop="tayNo" label="订单号" width="200" show-overflow-tooltip sortable></el-table-column>
            <el-table-column prop="tayIeflag" label="运单号" width="200" show-overflow-tooltip sortable ></el-table-column>
            <el-table-column prop="tayStates" label="车牌号" width="110" show-overflow-tooltip  sortable ></el-table-column>
            <el-table-column prop="tdrName" label="司机" show-overflow-tooltip  sortable></el-table-column>
            <el-table-column prop="tayWrkdate" label="司机电话" width="150" align="left" show-overflow-tooltip sortable ></el-table-column>
            <el-table-column prop="tayExpensePayable" label="运单状态" width="110" align="center" show-overflow-tooltip sortable ></el-table-column>
            <el-table-column prop="wabGoodname" label="货物名称" width="110" show-overflow-tooltip sortable ></el-table-column>
            <el-table-column prop="WAB_WEIGHT" label="货物重量(T)" width="130" align="right" show-overflow-tooltip sortable ></el-table-column>
            <el-table-column prop="WAB_ETC" label="ETC费用" width="110" align="right" show-overflow-tooltip sortable ></el-table-column>
            <el-table-column prop="WAB_OILCONS" label="油耗费用" width="110" align="right" show-overflow-tooltip sortable ></el-table-column>
            <el-table-column prop="WAB_POERF" label="运费" align="right" show-overflow-tooltip sortable ></el-table-column>
            <el-table-column prop="RESUL" label="总和" align="right" show-overflow-tooltip sortable ></el-table-column>
            <el-table-column prop="tayOprtdate" label="装货时间" width="110" align="center" show-overflow-tooltip sortable ></el-table-column>
            <el-table-column prop="tayOprtdate" label="卸货时间" width="110" align="center" show-overflow-tooltip sortable ></el-table-column>
            <el-table-column prop="tayOprtdate" label="轨迹跟踪" width="110" show-overflow-tooltip sortable ></el-table-column>
            <el-table-column prop="tayOprtdate" label="审核标识" width="110" show-overflow-tooltip sortable ></el-table-column>
            <el-table-column prop="tayOprtdate" label="审核操作人" width="120" show-overflow-tooltip sortable ></el-table-column>
            <el-table-column prop="tayOprtdate" label="审核操作时间" width="130" align="center" show-overflow-tooltip sortable ></el-table-column>
            <el-table-column prop="tayOprtdate" label="备注" show-overflow-tooltip sortable ></el-table-column>
          </el-table>
        </div>
        <!-- 分页 -->
        <div class="block">
          <el-pagination
            ref="pagination"
            small
            background
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="Pagination.currentPage"
            :page-sizes="Pagination.pageSizeList"
            :page-size="Pagination.pageSize"
            :layout="Pagination.layout"
            :total="Pagination.total">
          </el-pagination>
        </div>
      </div>
      <!-- 下方表格 -->
      <div class="botTable">
        <div class="botTableTitle">运单状态</div>
        <div class="botTableBox">
          <el-table :data="botTableData" border :height="botTableHeight" :header-cell-style="{ textAlign: 'center' }" highlight-current-row>
            <el-table-column type="index" align="center" label=" " width="50"></el-table-column>
            <el-table-column prop="tayNo" label="操作状态" align="center" show-overflow-tooltip sortable></el-table-column>
            <el-table-column prop="tayIeflag" label="司机" show-overflow-tooltip sortable ></el-table-column>
            <el-table-column prop="tayStates" label="车牌号" show-overflow-tooltip  sortable ></el-table-column>
            <el-table-column prop="tdrName" label="操作人" show-overflow-tooltip  sortable></el-table-column>
            <el-table-column prop="tayWrkdate" label="操作时间" align="center" show-overflow-tooltip sortable></el-table-column>
            <el-table-column prop="tdrRmark" label="备注" show-overflow-tooltip  sortable></el-table-column>
          </el-table>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import paginationMixin from '@/mixins/pagination'
import { getRefCodesByType } from '../../../request/dropDown'
import { getWillBillList, editWillBill, getWillBillStatus } from '../../../request/internal/worktrack'

export default {
  name: 'router.worktrack',
  mixins: [paginationMixin],
  data() {
    return {
      searchForm: {
        orderNum: '', // 订单号
        wayBill: '', // 运单号
        wayBillStatus: '', // 运单状态
        carNum: '', // 车牌号
        driver: '', // 司机
      },
      topTableData: [], // 主页上方表格 表格数据
      topTableHeight: 420, // 主页上方表格 表格高度
      topCurrentData: {}, // 主页上方表格 当前行数据
      botTableData: [], // 主页下方表格 表格数据
      botTableHeight: 220, // 主页下方表格 表格数据

      // 下拉框数据
      statuList: [], // 运单状态

      funcmap: {
        ZHD: '抵达装货确认',
        ZH: '装货完成确认',
        XHD: '抵达卸货确认',
        XH: '卸货完成确认',
        WC: '运单完成确认'
      },
      allowMap: {
        ZHD: {
          status: ['PC'],
          message: '运单状态不是派车状态，无法进行抵达装货确认',
        },
        ZH: {
          status: ['ZHD'],
          message: '运单状态不是抵达装货点状态，无法进行装货完成确认'
        },
        XHD: {
          status: ['ZH'],
          message: '运单状态不是装货状态，无法进行抵达卸货确认'
        },
        XH: {
          status: ['XHD'],
          message: '运单状态不是抵达卸货确认，无法进行卸货完成确认'
        },
        WC: {
          status: ['XH'],
          message: '运单状态不是卸货状态，无法进行运单完成确认'
        }
      }
    }
  },
  mounted () {
    this.searchList()
    this.getSelectData()
  },
  methods: {
    editWillBill (status) {
      if(Object.keys(this.topCurrentData).length == 0) {
        this.$alert('请选择一条数据','提示',{
          confirmButtonText: '确定'
        })
        return
      }
      if (!this.allowMap[status].status.includes(this.topCurrentData.wabStatus)) {
        this.$alert(this.allowMap[status].message,'提示',{
          confirmButtonText: '确定'
        })
        return
      }
      editWillBill({
        uuid: this.topCurrentData.uuid,
        wabStatus: status,
        wabCode: this.topCurrentData.tayIeflag,
        attCode: this.topCurrentData.tayNo,
        wabUuid: this.topCurrentData.wabUuid
      }).then(() => {
        this.$message.success(this.funcmap[status] + '成功！')
      }).finally(() => {
        this.topCurrentData = {}
        this.botTableData = []
        this.searchList()
      })
    },
    getList (currentPage, pageSize, updateTotal) {
      getWillBillList({
        orderCode: this.searchForm.orderNum,
        billCode: this.searchForm.wayBill,
        billStatus: this.searchForm.wayBillStatus,
        trkCode: this.searchForm.carNum,
        driver: this.searchForm.driver,
        currentPage,
        pageSize,
      }).then(res => {
        this.topTableData = res.data.FTKJWLHYPT.map(item => {
          return {
            wabStatus: item.wabStatus,
            wabUuid: item.attUuid,
            uuid: item.uuid,
            tayNo: item.attCode,
            tayIeflag: item.wabCode,
            tayStates: item.trkNo,
            tdrName: item.dvrName,
            tayWrkdate: item.dvrCtctel,
            tayExpensePayable: item.wabStatusName,
            wabGoodname: item.wabGoodname,
            WAB_WEIGHT: item.wabWeight,
            WAB_ETC: item.wabEtc || 0,
            WAB_OILCONS: item.wabOilcons || 0,
            WAB_POERF: item.wabPoerf || 0,
            RESUL: item.resul || 0
          }
        })
        updateTotal(res.data.total.FTKJWLHYPT)
      })
    },
    // 获取主页上方表格  当前行数据
    getTopCurrent(row) {
      this.topCurrentData = row
      getWillBillStatus({
        wabUuid: this.topCurrentData.uuid
      }).then(res => {
        this.botTableData = res.data.FTKJWLHYPT.map(item => {
          return {
            tayNo: item.optStatus,
            tdrName: item.optCreator,
            tayWrkdate: item.optCreatetime,
            tdrRmark: item.optRemark,
            tayIeflag: this.topCurrentData.tdrName,
            tayStates: this.topCurrentData.tayStates
          }
        })
      })
    },
    // 获取下拉框接口  所有下拉框接口写在这
    getSelectData() {
      getRefCodesByType('网络平台运单状态').then(res => {
        this.statuList = res.data.FTKJWLHYPT
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.workTrack {
  .workTrackTop {
    .topForm {
      padding-left: 10px;
      padding-top: 10px;
    }
    .topTable {
      .topTableTitle {
        font-weight: bold;
        padding-left: 10px;
      }
      .topTableBtn {
        padding-left: 15px;
        margin: 10px 0;
      }
      .block {
        padding-top: 5px;
        margin-bottom: 10px;
      }
    }
    .botTable {
      .botTableTitle {
        font-weight: bold;
        padding-left: 10px;
        margin-bottom: 10px;
      }
    }
  }
}
</style>
